<template>
  <div class="passenger-flow-condition" ref="container"></div>
</template>
<script setup lang="ts">
import {onMounted, watch,PropType} from "vue";
import {range, sampleSize} from "lodash";
import useEcharts from "../../utils/useCharts";

const {container, echarts, setOption} = useEcharts();
const props = defineProps({
  tableData: {
    type: Array as PropType<{name: string, count: number}[]>,
    default: () => [],
  },
});
const generateOptions = () => {
  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#2f2f48",
      borderColor: "#2f2f48",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "5%",
      right: "2%",
      bottom: "12%",
      top: "5%",
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#9292c1",
        fontSize: 15,
        margin: 20,
      },
      data: props.tableData.map(e => e.name),
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#9292c1",
      },
      splitLine: {
        lineStyle: {
          color: "#9292c130",
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "企业",
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: "#32fedb"},
            {offset: 1, color: "#319cfc"},
          ]),
        },
        barWidth: 20,
        data: props.tableData.map(e => {
          return e.count
        }),
        animationDuration: 3000,
        animationEasing: "cubicInOut",
      },
      // {
      //   name: "常乘客",
      //   type: "bar",
      //   itemStyle: {
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {offset: 0, color: "#f7cd5e"},
      //       {offset: 0.8, color: "#ee8149"},
      //     ]),
      //   },
      //   barWidth: 20,
      //   data: sources[1],
      //   animationDuration: 3000,
      //   animationEasing: "cubicInOut",
      // },
      // {
      //   name: "管控人员",
      //   type: "bar",
      //   itemStyle: {
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {offset: 0, color: "#de38fb"},
      //       {offset: 1, color: "#6732f3"},
      //     ]),
      //   },
      //   barWidth: 20,
      //   data: sources[2],
      //   animationDuration: 3000,
      //   animationEasing: "cubicInOut",
      // },
    ],
  };
};
watch(
    () => props.tableData,
    () => {
      const options = generateOptions();
      setOption(options);
    }
)
// onMounted(() => {
//   const sources = [
//     sampleSize(range(1000, 200), 7),
//     sampleSize(range(1000, 200), 7),
//     sampleSize(range(1000, 200), 7),
//   ];
//
//   const options = generateOptions(sources);
//   setOption(options);
// });
</script>
<style lang="scss" scoped>
.passenger-flow-condition {
  width: 100%;
  height: 400px;
}
</style>
